<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>IDEAL-PINPOINT</title>
		<!-- 引入JQuery -->
		<script type="text/javascript" src="../easyui-jquery/jquery.min.js"></script>
		<!-- 引入EasyUI -->
		<script type="text/javascript" src="../easyui-jquery/jquery.easyui.min.js"></script>
		<!-- 引入EasyUI的中文国际化js，让EasyUI支持中文 -->
		<script type="text/javascript" src="../easyui-jquery/locale/easyui-lang-zh_CN.js"></script>
		<script type="text/javascript" src="../easyui-jquery/time.js"></script>
		<!-- 引入EasyUI的样式文件-->
		<link rel="stylesheet" href="../easyui-jquery/themes/default/easyui.css" type="text/css" />
		<!-- 引入EasyUI的图标样式文件-->
		<link rel="stylesheet" href="../easyui-jquery/themes/icon.css" type="text/css" />

		<script>
			$(function() {
				$.get("http://localhost:8041/my/applications", {},
					function(rs) {
						var data_selector = JSON.parse(rs);
						$.each(data_selector, function(i, item) {
							tr = $("<option>" + data_selector[i].applicationName + "</option>");
							$("#appName").append(tr);
						});
					});
			});

			function show() {
				$.get("http://localhost:8041/my/transactionListForConditions", {
						applicationName: $("#appName").val(),
						startTimestamp: Date.parse(new Date($("#startTime").val())),
						endTimestamp: Date.parse(new Date($("#endTime").val())),
						limit: $("#ss").val()
					},
					function(rs) {
						assembly(JSON.parse(rs));
					});

				//				jQuery.ajax({
				//					type: 'GET',
				//					url: 'http://180.101.144.29:8041/my/transactionListForConditions',
				//					cache: false,
				//					dataType: 'text',
				//					data: {
				//						applicationName: $("#appName").val(),
				//						startTimestamp: Date.parse(new Date($("#startTime").val())),
				//						endTimestamp: Date.parse(new Date($("#endTime").val())),
				//						limit: $("#ss").val()
				//					},
				//					success: function(result) {
				//						assembly(JSON.parse(result));
				//					},
				//					error: function(xhr, status, info) {
				//					}
				//				});
			}

			function assembly(data) {
				var str = $("<thead><tr><th align='center'>Number</th><th align='center'>StartTime</th><th align='center'>Path</th><th align='center'>Res. (ms)</th><th align='center'>Exception</th><th align='center'>Agent</th><th align='center'>ClientIP</th><th align='center'>Trasaction</th></tr></thead><tbody>");
				$("table").append(str);
				$.each(data, function(i, item) {
					var startTime = getFormatDate(data[i].startTime);
					td = $("<tr><td align='center' width='100'>" + (i + 1) +
						"<td align='center' width='300'>" + startTime +
						"<td align='center' width='200'><a href=\"second.html?traceId=" + data[i].transactionId.agentId + '^' + data[i].transactionId.agentStartTime + '^' + data[i].transactionId.transactionSequence + "&agentId=" + data[i].agentId + "&spanId=" + data[i].spanId + "&focusTimestamp=" + data[i].startTime + "\">" + data[i].rpc +
						"</a></td><td align='center' width='100'>" +
						"</td><td align='center' width='100'>" +
						"</td><td align='center' width='100'>" + data[i].agentId +
						"</td><td align='center' width='200'>" + data[i].remoteAddr +
						"</td><td align='center' width='200'>" + data[i].transactionId.agentId + '^' + data[i].transactionId.agentStartTime + '^' + data[i].transactionId.transactionSequence + "</td></tr>");
					$("table").append(td);
				});
				$("table").append("</tbody>");
			}
		</script>
	</head>

	<body class="easyui-layout">

		<div data-options="region:'north',title:'ideal-pinpoint',split:true" style="height:100px;">
			<br/>
			<form name="form" method="get" action="#">
				<div style="position:relative;left:20px;top：60px">
					<span id="selectApp" style="position:relative;left: 20px;">应用名称：
						<select id="appName" name="dept" style="width:150px;">   
    						<option>-----请选择应用-----</option>   
						</select>
					</span>

					<span style="position:relative;left: 30px;">开始时间：</span>
					<span style="position:relative;left:30px;top：30px"><input  id="startTime" class="easyui-datetimebox" name="birthday"     
        data-options="required:true,showSeconds:false" value="2/2/1988 2:3" style="width:150px"> </span>
					<span style="position:relative;left:80px;top：10px">结束时间：</span>
					<span style="position:relative;left:80px;top：50px"><input id="endTime" class="easyui-datetimebox" name="birthday"     
        data-options="required:true,showSeconds:false" value="3/4/2010 2:3" style="width:150px"> </span>
					<span style="position:relative;left: 150px;">显示条数：<input id="ss" class="easyui-numberspinner" style="width:80px;"   
        required="required" data-options="min:1,max:1000,editable:true"> </span>
					<span style="position:relative;left: 250px;"><button type="button" onclick="show()">查询</button></span>
				</div>
		</div>
		</form>

		<div data-options="region:'center',title:'详细信息'" style="padding:5px;background:#eee;">
			<table title="Complex TreeGrid" class="easyui-treegrid" style="word-break:break-all; word-wrap:break-all;width:100%;height:550px;TABLE-LAYOUT:fixed">
			</table>
		</div>

		<div data-options="region:'south',title:'South Title',split:true" style="height:100px;">
		</div>
	</body>

</html>